---
import { HEADER_LINKS } from '~/config'
import ThemeToggle from '~/components/theme/ThemeToggle'
import HeaderGradient from '~/components/theme/HeaderGradient.astro'
import SectionDivider from '~/components/base/SectionDivider.astro'
import HeaderLink from '~/components/base/HeaderLink.astro'
import SearchSwitch from '~/components/base/SearchSwitch.astro'
import { Image } from 'astro:assets'
import favicon from '../../public/favicon.svg'
---

<HeaderGradient />
<header>
  <div class="mx-auto global-layout-width flex justify-between px-6 sm:px-8 py-4 lg:px-8">
    <div class="flex gap-3 sm:gap-6 items-center flex-shrink-0">
      <a href="/" class="pointer-events-auto select-none" transition:persist>
        <Image
          src={favicon}
          width={32}
          height={32}
          alt="Logo"
          class="w-8 h-8 border-2 border-transparent dark:border-border"
          densities={[1, 2]}
        />
      </a>
      <div class="flex gap-1">
        {
          HEADER_LINKS.map((link) => (
            <HeaderLink href={link.url} background>
              {link.name}
            </HeaderLink>
          ))
        }
      </div>
    </div>
    <div class="flex gap-2 items-center" transition:persist="header-theme-toggle">
      <SearchSwitch />
      <a
        href="/atom.xml"
        target="_blank"
        class="inline-flex items-center hover:scale-105 size-5 origin-center"
        aria-label="RSS Feed"
        title="RSS Feed"
      >
        <span class="icon-[material-symbols--rss-feed] size-5"></span>
      </a>
      <ThemeToggle client:load />
    </div>
  </div>
  <div class="relative global-layout-width mx-auto pointer-events-none">
    <div aria-hidden="true" class="absolute inset-x-0 -top-14 bottom-0 mx-auto global-layout-width">
      <div class="to-(--color-border)/50 absolute bottom-0 left-0 top-0 w-px bg-gradient-to-b from-transparent to-75%"></div>
      <div class="to-(--color-border)/50 absolute bottom-0 right-0 top-0 w-px bg-gradient-to-b from-transparent to-75%"></div>
    </div>
  </div>
</header>

<SectionDivider className="border-t-border dark:border-t-border/50" />
